<template>
	<div class="header">
		<div class="number">
			<div class="popularity">
				<div class="label">人气：</div>
				<div class="num">{{ popularity }}</div>
			</div>
			<div class="fans">
				<div class="label">粉丝：</div>
				<div class="num">{{ fans }}</div>
			</div>
		</div>
		<div class="icon">
			<i
				class="iconfont icon-zhiding"
				:class="{ topping }"
				:title="topping ? '取消置顶' : '置顶'"
				@click="isTopping"
			></i>
			<i
				:class="
					`el-icon-${penetrate ? 'lock' : 'unlock'} ${
						penetrate ? 'penetrate' : ''
					}`
				"
				:title="penetrate ? '取消穿透' : '穿透'"
				@click="isPenetrate"
			></i>
			<i class="el-icon-headset" title="点歌姬" @click="openMusic"></i>
			<i class="el-icon-setting" title="设置" @click="openSetting"></i>
			<i class="el-icon-circle-close" title="关闭" @click="close"></i>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 穿透
			penetrate: false,
			// 置顶
			topping: true,
			// 人气
			popularity: "",
			// 粉丝数
			fans: "",
			// up uid
			uid: localStorage.getItem("liveUid") || "478490349",
		};
	},
	created() {
		// 获取全部粉丝数量
		this.getFans();
		// 获取房间id
		this.getRoomId();
	},
	mounted() {
		localStorage.setItem("livePenetrate", "0");

		// 接收设置人气的通信
		this.$electron.remote.ipcMain.on("setPopular", (e, val) => {
			this.popularity = val;
		});

		// 接收设置id的通信
		this.$electron.remote.ipcMain.on("updateUid", (e, val) => {
			this.uid = val;
			this.getFans();
			this.getRoomId();
		});
	},
	methods: {
		// 置顶 || 取消置顶
		isTopping() {
			this.topping = !this.topping;
			this.$electron.ipcRenderer.send("window-top", this.topping);
		},

		// 穿透 || 取消穿透
		isPenetrate() {
			this.penetrate = !this.penetrate;
			localStorage.setItem("livePenetrate", this.penetrate ? "1" : "0");
		},

		// 打开点歌姬
		openMusic() {
			this.$electron.ipcRenderer.send("open-music");
		},

		// 打开设置
		openSetting() {
			this.$electron.ipcRenderer.send("open-setting");
		},

		// 获取粉丝数量
		getFans() {
			this.axios
				.get(
					`https://api.bilibili.com/x/relation/stat?vmid=${this.uid}&jsonp=jsonp`
				)
				.then((res) => {
					this.fans = res.data.data.follower;
					setTimeout(() => {
						this.getFans();
					}, 60000);
				});
		},

		// 获取roomid
		getRoomId() {
			this.axios
				.get("https://api.bilibili.com/x/space/acc/info", {
					params: {
						mid: this.uid,
					},
				})
				.then((res) => {
					localStorage.setItem(
						"liveRoomId",
						res.data.data.live_room.roomid
					);
					this.$electron.ipcRenderer.send(
						"setRoomId",
						res.data.data.live_room.roomid
					);
				});
		},

		// 关闭窗口
		close() {
			this.$electron.ipcRenderer.send("window-close");
		},
	},
};
</script>

<style lang="scss">
.header {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid rgb(130, 130, 130);
	-webkit-app-region: drag;
	.number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		div {
			display: flex;
			align-items: center;
			.label {
				color: #999;
				font-size: 12px;
				white-space: nowrap;
			}
			.num {
				font-size: 14px;
				color: #fff;
			}
			&.fans {
				margin-left: 10px;
			}
		}
	}
	.icon {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		i {
			font-size: 18px;
			cursor: pointer;
			margin: 0 5px;
			color: #999;
			-webkit-app-region: no-drag;
			transition: all 0.3s;
			&:first-child {
				font-size: 16px;
			}
			&:hover {
				color: #fff;
			}
			&.topping,
			&.penetrate {
				color: #00a1d6;
			}
			&:last-child:hover {
				color: #f56565;
			}
		}
	}
}
</style>
